<template>
  <view class="cart-container">
    <template v-if="cart.length !== 0">
      <!-- 地址 -->
      <my-address></my-address>
      <!-- 地址 -->

      <!-- 商品标题 -->
      <view class="cart-title">
        <uni-icons class="cart-title-icon" type="shop" size="18"></uni-icons>
        <text>购物车</text>
      </view>
      <!-- 商品标题 -->

      <!-- 商品列表 -->
      <view class="cart-list">
        <uni-swipe-action>
          <block v-for="(goods, index) in cart" :key="index">
            <uni-swipe-action-item
              :right-options="options"
              @click="removeGoodsInfo(goods)"
            >
              <goods-list :goods="goods">
                <view slot="checked">
                  <radio
                    :checked="goods.goods_state"
                    color="red"
                    @click="setGoodsState(goods)"
                  ></radio>
                </view>
                <uni-number-box
                  slot="num"
                  background="#ecf0f1"
                  :min="1"
                  :max="99"
                  :value="goods.goods_count"
                  @change="goodsCountChange(goods, $event)"
                />
              </goods-list>
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </view>
      <!-- 商品列表 -->

      <!-- 结算按钮 -->
      <my-settle></my-settle>
    </template>
    <template v-else>
      <view class="cart-empty">
        <image class="cart-empty-pic" src="@/static/cart_empty.png"></image>
      </view>
    </template>
  </view>
</template>

<script>
import mixins from '@/mixins/tabbar-icon.js'
import { mapState, mapMutations } from 'vuex'
export default {
  mixins: [mixins],
  data() {
    return {
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    }
  },
  computed: {
    ...mapState('cart', {
      cart: 'cart'
    })
  },
  methods: {
    ...mapMutations('cart', {
      setGoodsState: 'setGoodsState', //选中状态改变
      setGoodsCount: 'setGoodsCount', //改变商品数量
      removeGoodsInfo: 'removeGoodsInfo' //删除商品
    }),
    //商品数量变化
    goodsCountChange(goods, count) {
      this.setGoodsCount({ goods, count })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: white;
}
.cart-container {
  padding-bottom: 50px;
}
.cart-title {
  height: 30px;
  display: flex;
  align-items: center;
  // line-height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #efefef;
  .cart-title-icon {
    margin-right: 5px;
  }
  text {
    font-size: 14px;
  }
}
.cart-list {
  .item-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
  }
  .goods-priceAndNum {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.cart-empty {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .cart-empty-pic {
    width: 200px;
    height: 200px;
  }
}
</style>
